<template>
	<div>
		<div class="pageTitle boxFlex">
			创建团队
			<!-- <el-button @click="postCreatedCompany" type="primary" :loading="ladings">创建</el-button> -->
		</div>
		<div class="pageContent">
			<!-- <div class="contentHeader">选择需要创建团队的类型</div> -->
			<div class="contentHeader">选择团队类型</div>
			<div class="teamType">
				<!-- companyTypeList -->
				<div class="typeList" v-for="item in companyTypeList" :key="item.id" @click="selectType(item)" :class="msgForm.companyNature == item.id?'selectTypes':''">
					<el-image :src="item.remark?item.remark:$globalData.defaultImg" class="typeListImage" fit="cover"></el-image>
					<div class="teamTitle">{{ item.value }}</div>
				</div>
			</div>
			<div class="contentHeader">团队基本信息</div>
			<div class="basicInformation flex" style="justify-content: space-between;">
				<div>
					<el-form :model="msgForm" class="demo-form-inline" label-width="12rem">
						<el-form-item label="团队名称：">
							<el-input v-model="msgForm.companyName" class="ainput" placeholder="团队名称"></el-input>
						</el-form-item>
					</el-form>
					<el-form :inline="true" :model="msgForm" class="demo-form-inline" label-width="12rem">
						<el-form-item label="管理员姓名：">
							<el-input v-model="msgForm.name" disabled="disabled" placeholder="管理员姓名"></el-input>
						</el-form-item>
						<el-form-item label="联系电话：" class="ael-form-item">
							<el-input v-model="msgForm.phone" disabled="disabled" placeholder="联系电话"></el-input>
						</el-form-item>
					</el-form>
					<el-form :model="msgForm" class="demo-form-inline" label-width="12rem">
						<el-form-item label="团队注册地址：">
								<!-- <area-cascader v-model="msgForm.addressData" :key="areaCascaderKey" style="width: 478px;" :data="$pcaa" :level="2" type="all"
								 icon="el-icon-arrow-down" placeholder="请选择地区"></area-cascader> -->
								<addressD :value='addressData' @getAddressData="getAddressData"></addressD>
						</el-form-item>
						<el-form-item label="">
							<el-input v-model="msgForm.addressInputs" class="ainput" placeholder="团队注册地址"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="uploadLogoImage">
					<el-upload
					  class="avatar-uploader"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :show-file-list="false"
					  :http-request="uploadLogoImg"
					  >
					  <img v-if="msgForm.companyLogo" :src="msgForm.companyLogo" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					  <div><el-button type="text">上传公司LOGO</el-button></div>
					</el-upload>
				</div>
			</div>
			<div class="contentHeader">团队认证材料</div>
			<el-form :model="msgForm" class="demo-form-inline" label-width="12rem">
				<el-form-item label="组织代码：">
					<el-input v-model="msgForm.organizationCode" class="ainput" placeholder="组织代码"></el-input>
				</el-form-item>
			</el-form>
			<div class="basicInformation flex" style="padding-left: 12rem;">
				<div class="rankPhotos flex">
					<div class="rankPhotosListBox" v-for="(img, index) in msgForm.licensePicture" :key="index">
						<i class="el-icon-error deleteRankPhoto" @click="deleteImages(index)" title="删除材料"></i>
						<el-image :src="img" fit="cover" class="InformationImgs"></el-image>
					</div>
					<el-upload class="InformationUpload rankPhotosListBox" ref="InformationUpload" action="" :show-file-list="false"
					 :http-request="upLoadFiles">
						<div class="materials">
							<i class="el-icon-plus avatar-uploader-icon"></i>
							<p>上传团队认证材料</p>
						</div>
					</el-upload>
				</div>
			</div>
			<div class="InformationUploadTip">为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
		</div>
		<div class="postCreatedCompanyBox">
			<el-button @click="postCreatedCompany" class="postCreatedCompanyBtn" type="primary" round :loading="ladings">创建</el-button>
		</div>
	</div>
</template>

<script>
	import addressD from '@/components/address.vue'
	export default {
		data() {
			return {
				ladings: false,
				msgForm: {
					companyName: '', //公司名称
					companyNature: '', //公司性质
					createUser: '', //创建人Id
					registeredAddress: '', //注册地址
					areaInfo: [], //地址信息
					addressData: '',
					addressText: [],
					addressInputs: '',
					organizationCode: '', //组织机构代码
					name: '',
					phone: '',
					licensePicture: [] ,// 图片
					companyLogo: ''
				},
				// uploadFiles: new Map(),// 文件上传的列表map
				// uploadFilesItem: [],// 文件上传的列表map
				// uploadFilesList: [],// 文件上传的列表数组
				companyTypeList: '', // 要创建的公司类型数据
				// addressArryList: new Map(), // 地址选择
				// addressArry: {
				// 	province: '', // 省
				// 	provinceList: '', // 省数据
				// 	city: '', // 市
				// 	cityList: '', // 市数据
				// 	district: '', // 区/县
				// 	districtList: '', // 区/县数据
				// 	town: '', // 镇
				// 	townList: '', // 镇数据
				// 	registeredAddress: ''
				// }
				addressData:[],
				areaCascader: '', // 地址选择器时候显示下拉框
				areaCascaderKey: new Date().getTime()
			}
		},
		components: {
			addressD
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 11)
			let userInfo = this.$store.state.user.userInfo
			this.msgForm.createUser = userInfo.id
			this.msgForm.name = userInfo.name
			this.msgForm.phone = userInfo.phone

			this.getCompanyTypeList()
			// this.getProvinceData()
		},
		watch:{
			areaCascader(newData){
				// console.log(a, 111)
				if(!newData && !this.msgForm.addressData){
					// console.log(this.msgForm.addressData)
					this.areaCascaderKey = new Date().getTime()
				}
			},
		},
		methods: {
			getAddressData(e){
				let num = e.key.split('/')
				let arr = e.text.split('/')
				num.forEach((item,index) =>{
					const key = item
					let arr2 = {}
					arr2[key] = arr[index]
					arr[index] = arr2
				})
				this.msgForm.addressData = arr
			},
			// newCompany
			postCreatedCompany() {
				// 创建

				if (!this.msgForm.companyNature) {
					this.$message.error('请选择类型')
					return
				} else if (!this.msgForm.companyName) {
					this.$message.error('请输入公司名称')
					return
				} else if (!this.msgForm.organizationCode) {
					this.$message.error('请输入组织机构代码')
					return
				}else if (!this.msgForm.addressData) {
					this.$message.error('请选择团队注册地址')
					return
				} else if (this.msgForm.licensePicture.length < 1) {
					this.$message.error('请上传图片')
					return
				}
				if(this.msgForm.addressData){
					this.msgForm.addressData.forEach((v, i)=>{
						for(let key in v){
							this.msgForm.addressText.push(v[key])
							this.msgForm.areaInfo.push(key)
						}
					})
					this.msgForm.registeredAddress = this.msgForm.addressText.join('') + this.msgForm.addressInputs
				}
				// if(this.addressArryList.size < 4 && this.addressArryList.size >= 3){
				// 	this.addressArryList.set('town', '')
				// } else if(this.addressArryList.size < 3){
				// 	this.$message.error('请选择详细地址')
				// 	return
				// }


				// let addr = [...this.addressArryList.values()]
				// this.msgForm.areaInfo = this.msgForm.areaInfo.join('/')
				this.ladings = true

				this.$request.postForm(this.$api.newCompany, this.msgForm).then(res => {
					if (res.code == 200) {
						this.$message.success('创建公司成功')
						setTimeout(() => {
							this.ladings = false
							this.$router.push(`/myteam/teaminfo/teamlist?t=${new Date().getTime()}`)
						}, 300)
					} else{
						this.ladings = false
					}
				}).catch(e=>{
					this.ladings = false
				})
			},
			getCompanyTypeList() {
				// 获取公司类型数据
				this.$request.postForm(this.$api.getCompanyType).then(res => {
					if (res.code == 200) {
						this.companyTypeList = res.data
					}
				})
			},
			selectType(item) {
				// 选择公司类型
				this.msgForm.companyNature = item.id
			},
			upLoadFiles(file) {
				// 上传文件
				let File = file.file
				let fileSize = 1024 * 1024 * 2 // 限制大小2MB
				if (File.size > fileSize || File.type != 'image/jpeg') {
					this.$message.error('上传图片大小不能大于2M，且必须为jpg格式')
					return
				}
				let formData = new FormData()
				formData.append('identifier', 'placeBusiness')
				formData.append('file', File)
				this.$request.uploading(this.$api.uploadImg, formData).then(res => {
					if (res.code == 200) {
						this.msgForm.licensePicture.push(res.data)
					}
				})
			},
			deleteImages(i) {
				// 删除图片
				this.msgForm.licensePicture.splice(i, 1)
			},
			uploadLogoImg(file){
				let File = file.file
				let fileSize = 1024 * 1024 * 2 // 限制大小2MB
				if (File.size > fileSize || File.type != 'image/jpeg') {
					this.$message.error('上传图片大小不能大于2M，且必须为jpg格式')
					return
				}
				let formData = new FormData()
				formData.append('identifier', 'logo')
				formData.append('file', File)
				this.$request.uploading(this.$api.uploadImg, formData).then(res => {
					if (res.code == 200) {
						this.msgForm.companyLogo = res.data
					}
				})
			}
			// getProvinceData() {
			// 	// 获取省数据
			// 	this.getAllAddressList('', (province) => {
			// 		this.addressArry.provinceList = province
			// 	})
			// },
			// getAllAddressList(id = '', callBack) {
			// 	// 获取所有地址信息
			// 	this.$request.postForm(this.$api.getAllAddress, {
			// 		pid: id
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			callBack(res.data)
			// 		}
			// 	})
			// },
			// selectProvinceData(id) {
			// 	// 选择省数据清空后面所有选择框数据
			// 	this.addressArry.cityList = ''
			// 	this.addressArry.districtList = ''
			// 	this.addressArry.townList = ''
			// 	this.addressArry.city = ''
			// 	this.addressArry.district = ''
			// 	this.addressArry.town = ''
			// 	this.addressArryList.set('province', id)
			// 	// 获取市数据
			// 	this.getAllAddressList(id, (city) => {
			// 		this.addressArry.cityList = city
			// 	})
			// },
			// selectCityData(id) {
			// 	// 选择市数据清空后面所有选择框数据
			// 	this.addressArry.districtList = ''
			// 	this.addressArry.townList = ''
			// 	this.addressArry.district = ''
			// 	this.addressArry.town = ''
			// 	this.addressArryList.set('city', id)
			// 	// 获取区县数据
			// 	this.getAllAddressList(id, (city) => {
			// 		this.addressArry.districtList = city
			// 	})
			// },
			// selectDistrictData(id) {
			// 	// 选择区县数据清空后面所有选择框数据
			// 	this.addressArry.townList = ''
			// 	this.addressArry.town = ''
			// 	this.addressArryList.set('district', id)
			// 	// 获取镇数据
			// 	this.getAllAddressList(id, (city) => {
			// 		this.addressArry.townList = city
			// 	})
			// },
			// selectTownData(id) {
			// 	// 选择市数据清空后面所有选择框数据
			// 	this.addressArryList.set('town', id)
			// },
		}
	}
</script>

<style scoped="scoped">
	.pageTitle {
		padding: 10px 20px;
		border-bottom: 1px solid #DCDCDC;
		align-items: center;
		height: 53px;
	}

	.pageContent {
		padding: 20px;
	}

	/* .contentHeader {
		color: #333333;
		font-size: 16px;
		position: relative;
		width: 100px;
		text-align: right;
		margin-bottom: 20px;
	}

	.contentHeader::after {
		content: '';
		width: 730px;
		top: 50%;
		border-bottom: 1px dotted #DCDCDC;
		position: absolute;
		left: 120px;
	} */
.contentHeader{
		width: 100%;
		padding: 10px 20px;
		color: #333333;
		font-size: 16px;
		background: #F3F3F3;
		margin-bottom: 20px;
	}
	.teamType {
		/* width: 80%; */
		/* margin-left: 10%; */
		/* justify-content: space-evenly; */
		margin-bottom: 60px;
		padding-left: 12rem;
	}

	.typeList {
		width: 100px;
		height: 110px;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		text-align: center;
		padding: 20px;
		cursor: pointer;
		display: inline-block;
		margin: 0 20px;
	}

	.typeList:first-child {
		margin-left: 0;
	}

	.typeList:last-child {
		margin-right: 0;
	}

	.typeListImage {
		width: 50px;
		height: 50px;
		border-radius: 100%;
	}

	.typeList:hover,
	.selectTypes {
		border-color: #23B14D;
		/* border-width: 2px; */
		background: rgba(35, 177, 77, 0.1);
		box-shadow: 0 0 5px 1px #23B14D;
	}

	.ainput {
		width: 478px;
	}

	.slectAddress {
		width: 112px;
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.aainput {
		width: 270px;
		margin-left: 10px;
	}

	.ael-form-item>>>.el-form-item__label {
		width: 100px !important;
	}

	.InformationUploadTip {
		padding-left: 12rem;
		color: #AAAAAA;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 60px;
	}

	.rankPhotos {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.rankPhotosListBox {
		width: 210px;
		height: 138px;
		border: 1px solid #DCDCDC;
		position: relative;
		text-align: center;
		margin-right: 15px;
		margin-bottom: 15px;
	}

	.InformationImgs {
		width: 100%;
		height: 100%;
	}

	.deleteRankPhoto {
		color: darkred;
		position: absolute;
		top: -10px;
		right: -10px;
		z-index: 5;
		font-size: 24px;
		cursor: pointer;
		background: #fff;
		border-radius: 100%;
	}

	.InformationUpload {
		margin-right: 0;

	}

	.materials {
		width: 210px;
		height: 138px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		border: 1px solid #DCDCDC;
	}

	.materials .avatar-uploader-icon {
		width: 100%;
		height: 50px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.materials p {
		width: 100%;
		color: #AAAAAA;
		font-size: 12px;
	}

	.basicInformation {
		margin-bottom: 60px;
	}
	/* .uploadLogoImage{
		padding-right: 75px;
	} */
	.uploadLogoImage>>>.avatar,.uploadLogoImage>>>.avatar-uploader-icon{
		width: 100px;
		height: 100px;
		border: 1px dotted #DCDCDC;
		border-radius: 10px;
		margin-bottom: 5px;
		display: block;
	}
	.postCreatedCompanyBox{
		width: 100%;
		border-top: 1px solid #DCDCDC;
		padding: 40px;
		text-align: center;
	}
	.postCreatedCompanyBtn{
		width: 150px;
	}
</style>
